<%@ page contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="s" uri="/struts-tags"%>


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
 
	<script src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/ddaccordion.js"></script>
	<script type="text/javascript" src="js/codigoPaginas.js" ></script>
	
    
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&amp;sensor=false"></script>  

<%
String[] str1= null;
if (request.getAttribute("datosMapa")!= null)
	str1 = (String[])request.getAttribute("datosMapa");

String latitudActual="0";	
if (request.getAttribute("latitudActual")!= null)
	latitudActual = request.getAttribute("latitudActual").toString();

String longitudActual="0";	
if (request.getAttribute("longitudActual")!= null)
	longitudActual = request.getAttribute("longitudActual").toString();


int strLength = str1==null?0:str1.length;
%>

<script type="text/javascript">
var start= '0';
var end = '0';
var map;
var marker;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myLatlng;
function initialize() {
	


    
    myLatlng = new google.maps.LatLng(-34.598581, -58.420270500000015);

    var mapOptions = {
      zoom: 12,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    directionsDisplay.setMap(map);
    
    var latitudActual = "<%=latitudActual%>";
    var longitudActual = "<%=longitudActual%>";
    if(longitudActual != "0" && latitudActual != "0"){
    	
    	myLatlng = new google.maps.LatLng(latitudActual,longitudActual);

    	marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Posicion Actual'
        });
    	
    	//inicio la actualizacion ocn set interval
    	actualizaPosicionEnMapa();
    	
    	
    }
	


}


function actualizaPosicionEnMapa()
{
setInterval(function(){
	
	var formInput= 'vehiculo='+$('#vehiculo').val();
	
	//var formInput= 'vehiculo=12';
	//alert(formInput);

    $.getJSON('vehiculoPosicionActual', formInput,
  		  function(data) {  
      //ya ha llamado al json, ahora rellenamos el textbox,

      
    myLatlng = new google.maps.LatLng(data.latitudActual, data.longitudActual);
      
       marker.setMap(null);
      //alert("lat:"+data.latitudActual+" long"+ data.longitudActual );
      
      	marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Posicion Nueva'});
   
   
    }).error(function(data,status,xhr) { 
    	alert(data.responseText);
    	var a = data;
    	var b = a;
    });



},20000);
}
    

  
  function mostrarRecorrido()
  {

	  	//alert('2');

		var waypts = [];

		<%for(int i=1; i<strLength-1; i++){%>
		waypts.push({ location:'<%=str1[i]%>', stopover:true});
   	    <%}%>
	  
        start = "<%=str1==null?0:str1[0]%>";
        end = "<%=str1==null?0:str1[strLength-1]%>"; 	 
        

       
      /*waypts.push({
          location:'Baigorria 1200, Buenos Aires, Ciudad Autónoma de Buenos Aires, Argentina',
          stopover:true} );*/

      var request = {
              origin: start,
              destination: end,
              waypoints: waypts,
              optimizeWaypoints: true,
              travelMode: google.maps.DirectionsTravelMode.DRIVING
          }; 
	  
	  	if (start != "0"){
	  		
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK)
        	  {
        	  
            directionsDisplay.setDirections(response);
        	  //alert(3);
        	  }
          else
        	  alert(status);

  	});
  }
  }

google.maps.event.addDomListener(window, 'load', initialize);
mostrarRecorrido();
</script>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<title><tiles:insertAttribute name="title" ignore="true" /></title>

<s:head/>

</head>

<body>
<div id="container">
	<div id="barraSuperior" class="barraSuperior" >
		<tiles:insertAttribute name="header" />
	</div> 
	<div id="menuLateral" class="arrowlistmenu"> 
		<tiles:insertAttribute name="menu" /> 
	</div>
   	<div id="principal" class="principal"> 
   		<tiles:insertAttribute name="body" /> 
   	</div>
   	<div id="footer" class="footer">
   		<tiles:insertAttribute name="footer" />
   	</div>
</div>
</body>
</html>